
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>rem phone test</title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        html {
            height: 100%;
            width: 100%;
            font-family: 'Heiti SC', 'Microsoft YaHei';
            font-size: 20px;
            overflow: auto;
            outline: 0;
            -webkit-text-size-adjust:none;
        }
        body {
            height: 100%;
            margin: 0;
            -webkit-user-select: none;
            position: relative;
        }
        header,
        footer {
            width: 100%;
            line-height: 1.5rem;
            font-size: 1rem;
            color: #000;
            border: 1px solid #ccc;
            text-align: center;
            background-color: #ccc;
        }
        .bd {
            margin-top: 1rem;
            margin-bottom: .5rem;
            margin-right: -.5rem;
            font-size: 0;
        }
        .box {
            width: 5rem;
            height: 5rem;
            display: inline-block;
            margin-right:.5rem;
            margin-bottom: .5rem;
        }
        .blue-box {
            background-color: #06c;
        }
        .org-box {
            background-color: #1fc195;
        }
    </style>

</head>

<body>

<header>我是头部</header>


<div class="bd">
    <div class="box blue-box"></div>
    <div class="box org-box"></div>
    <div class="box blue-box"></div>
    <div class="box org-box"></div>
    <div class="box blue-box"></div>
    <div class="box org-box"></div>
</div>


<footer>我是页脚</footer>

<script>
    (function (doc, win) {
        var docElenmt = doc.documentElement,
        //           判断窗口有没有orientationchange方法，true表示是冒号前面orientationchange；false是'resize'；下面的是改变字体尺寸，由rem转换成px；1rem=16px
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

               Xgz = function () {
//                   元素的 clientWidth是对象可见的宽度
                    var clientWidth = docElenmt.clientWidth;
//                   如果 不是可见的宽度
                    if (!clientWidth) return;
//                   改变字体的尺寸                    （ 可见宽度比最小宽度320）
                    docElenmt.style.fontSize = 20 * (clientWidth / 320) + 'px';
                    console.log(Math.ceil(20 * (clientWidth / 320)))
                };
//        如果不是元素监听时间就返回
        if (!docElenmt.addEventListener) return;

        win.addEventListener(resizeEvt, Xgz, false);
//        第一个参数   DOMContentLoaded事件是document对象上的事件。指的是DOM已经加载完毕
        doc.addEventListener('DOMContentLoaded', Xgz, false);
//        第二参数为函数
//       第三个参数  true 的触发顺序总是在 false 之前；
//
//        如果多个均为 true，则外层的触发先于内层；
//
//        如果多个均为 false，则内层的触发先于外层。
    })(document, window);
</script>
</body>

</html>